<template>
  <!--主要是数据展示-->
  <div>
    <div class="main-page">
      <!--左边的树形搜素-->
      <div class="left-page" :v-loading="loading">
        <el-card shadow="always">
          <!--  prefix-icon="el-icon-search"-->
          <span style="flex: auto">
            <el-input
              clearable
              style="margin-bottom: 8px;width: 85%"
              placeholder="模糊搜索病种"
              v-model="searchValue">
          </el-input>
           <el-button icon="el-icon-search" circle  @click="onChangeSearch"></el-button>
          </span>

          <!--树形结构-->
          <div ref="downTree" class="down-tree">
            <el-tree
              class="filter-tree"
              :data="data"
              :props="defaultProps"
              default-expand-all
              ref="tree">
 <!--              <template slot-scope="{ node }">
                 <span class="custom-node">{{ node.label }}</span>
                 <el-button @click="handleButtonClick(node)" size="mini">按钮</el-button>
                 <span>
                     <el-tag type="warning"
                             v-if="node.id"
                             style="text-align: center; line-height: 1.2; margin-top: 4px"
                             color="orange">
                       {{node.id}}
                     </el-tag>

                     <el-tag v-if="node.label"
                             style="width: 30px; text-align: center; line-height: 1.2; margin-top: 4px"
                             color="blue">
                       {{node.label}}
                     </el-tag>
                 </span>
               </template>-->

            </el-tree>
          </div>
        </el-card>
      </div>

      <!--右侧的表格-->
      <div class="right-page">

      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "FoodDiseaseMain",
    data() {
      return {
        loading: true,
        searchValue: '', // 树联动搜索框
        defaultProps: {
          children: 'children',
          label: 'label'
        },
        data: [
          {
            id: 1,
            label: '一级 1',
            children: [{
              id: 4,
              label: '二级 1-1',
              children: [{
                id: 9,
                label: '三级 1-1-1'
              }, {
                id: 10,
                label: '三级 1-1-2'
              }]
            }]
          }, {
            id: 2,
            label: '一级 2',
            children: [{
              id: 5,
              label: '二级 2-1'
            }, {
              id: 6,
              label: '二级 2-2'
            }]
          }, {
            id: 3,
            label: '一级 3',
            children: [{
              id: 7,
              label: '二级 3-1'
            }, {
              id: 8,
              label: '二级 3-2'
            }]
          }],
      }
    }, methods: {
      handleButtonClick(node) {
        console.log('点击了按钮，节点信息：', node);
      },
      //搜索
      onChangeSearch() {

      }
    }
  }
</script>

<style scoped>
  .main-page {
    display: flex;
    width: 100%;
  }

  .right-page {
    flex: 1;
    min-width: 0;
  }

  .left-page {
    width: 360px;
  }
</style>
